<template>

  <my-table ref="table" :title="$route.meta.title" :total="total" :rows="rows" @page-change="pageChange" @on-select="onSelect">
    <div class="md-layout" slot="search">
      <div class="md-layout-item md-size-50">
        <md-field md-clearable>
          <label>名称</label>
          <md-input v-model="search.name" @keyup.enter="queryList"></md-input>
        </md-field>
      </div>
      <div class="md-layout-item md-size-50">
        <md-field md-clearable>
          <label>手机</label>
          <md-input v-model="search.phone" @keyup.enter="queryList"></md-input>
        </md-field>
      </div>
    </div>
    <md-table-row slot-scope="{ item }">
      <md-table-cell md-label="姓名" >{{ item.name }}</md-table-cell>
      <md-table-cell md-label="年龄">{{ item.age }}</md-table-cell>
      <md-table-cell md-label="手机">{{ item.phone }}</md-table-cell>
      <md-table-cell md-label="生日">{{ item.birthday|date(2, true) }}</md-table-cell>
      <md-table-cell md-label="描述">{{ item.description }}</md-table-cell>
      <md-table-cell md-label="操作">
        <md-button class="md-just-icon md-success md-simple" @click="edit(item)">
          <md-icon>create</md-icon>
          <md-tooltip md-direction="left">编辑</md-tooltip>
        </md-button>
      </md-table-cell>
    </md-table-row>
  </my-table>

</template>

<script>
  import MyTable from '@/components/MyTable'

  import {toast} from "@/utils/tools";
  import {post} from '@/utils/ajax';
  import * as api from '@/constants/api';
  import * as constant from '@/constants'

  export default {
    components: {
      MyTable
    },
    computed: {

    },
    data () {
      return {
        total: 0,
        rows: [],
        search:{
          name: '',
          phone: '',
        },
        pageParams:{},
      }
    },
    methods: {
      onSelect(){},
      edit(item){
        toast('编辑')
      },
      pageChange(pageParams){
        this.pageParams ={...pageParams}
        this.queryList();
      },
      queryList(){
        this.$loading.show();
        post(api.TABLE_LIST, {...this.pageParams, ...this.search}).then(data=>{
          this.total = data.total;
          this.rows = data.rows;
          this.$loading.close();
        }).catch(()=>{
          this.$loading.close();
        })
      }
    },
    mounted () {

    },
    created(){
      this.queryList();
    },
    watch: {

    }
  }
</script>

<style lang="css" scoped>
</style>
